<template>
	<u-navbar @rightClick="save" autoBack right-text="保存" rightColor="#d81e06" title="设置" fixed placeholder></u-navbar>
	<view class="bg-[#ffffff]">
		<u-cell :border="false" is-link title="头像">
			<template #value>
				<u-avatar @click="changeAvatar" :src="changeInfo.avatar" size="60"></u-avatar>
			</template>
		</u-cell>
		<u-cell :border="false" is-link title="昵称" :value="changeInfo.nickName" @click="openPop"></u-cell>
		<u-cell @click="toAddress" :border="false" is-link title="地址管理"></u-cell>
		<u-cell @click="toChangePwd" :border="false" is-link title="修改密码"></u-cell>
		<!-- <u-cell v-if="childList.length > 0" @click="childListShow = true" :border="false" is-link title="切换子账号"></u-cell> -->
	</view>
	<u-gap height="20"></u-gap>
	<u-cell @click="toAbout" class="bg-[#FFFFFF]" :border="false" is-link title="关于共赋人生APP" :value="version"></u-cell>
	<u-gap height="40"></u-gap>
	<u-button @click="toLogin" text="切换登录" color="#d81e06" shape="circle" :custom-style="{margin:'0 16px'}"></u-button>
	<u-gap height="20"></u-gap>
	<u-button @click="logout" text="退出登录" color="#d81e06" shape="circle" :custom-style="{margin:'0 16px'}"></u-button>
	
	<u-popup mode="center" :show="popShow" round="8">
		<view class="pt-[20px] w-[300px]">
			<u-text text="修改昵称" size="18" bold align="center"></u-text>
			<u-gap height="20"></u-gap>
			<u-input class="mx-[16px]" v-model="nickName" clearable></u-input>
			<u-line margin="20px 0 0"></u-line>
			<view class="flex flex-row">
				<view @click="popShow = false" hover-class="hover-class" class="flex-1 leading-[50px] text-center text-[#999999]">取消</view>
				<u-line direction="column" length="50px"></u-line>
				<view @click="confirmPop" hover-class="hover-class" class="flex-1 leading-[50px] text-center text-[#d81e06]">确定</view>
			</view>
		</view>
	</u-popup>
	<!-- <u-action-sheet @close="childListShow = false" :show="childListShow" close-on-click-overlay cancelText="取消">
		<view @click="chooseChild(item)" v-for="(item,index) in childList" :key="item.UserID" class="h-[50px] gap-x-[4px] flex flex-row items-center justify-center border-b-[1px] border-b-[#eeeeee]">
			<u-image :src="item.Avatar" width="30" height="30" shape="circle"></u-image>
			<text class="text-[16px] text-[#333333]">{{item.NickName}}</text>
		</view>
	</u-action-sheet> -->
</template>

<script setup>	
	import {nextTick, ref, unref} from "vue";
	import * as api from "@/api.js";
	import * as uniapp from "@dcloudio/uni-app";
	import {useUserStore} from "@/store/config.js";
	
	const store = useUserStore();
	const popShow = ref(false);
	
	const changeInfo = ref({
		sex: 0,
		avatar: store.user.Avatar,
		realName: store.user.RealName || store.user.NickName,
		nickName: store.user.NickName,
	});
	
	const nickName = ref(changeInfo.value.nickName)
	
	const version = uni.getSystemInfoSync().appVersion;
	
	const changeAvatar = () => {
		uni.chooseImage({
			count:1,
			async success(res) {
				console.log(res.tempFilePaths[0])
				uni.showLoading();
				const result = await api.uploadImg(res.tempFilePaths[0]);
				uni.hideLoading();
				console.log(result);
				if(result[1]) {
					uni.showToast({
						icon:'none',
						title:result[1]
					})
				} else {
					//上传
					changeInfo.value.avatar = JSON.parse(result[0]).data.FileUrl
				}
			},
			fail(err) {
				uni.showToast({
					icon: 'none',
					title:err.errMsg
				})
			}
		})
	}
	
	const openPop = () => {
		popShow.value = true
		nickName.value = changeInfo.value.nickName
	}
	
	const confirmPop = () => {
		changeInfo.value.nickName = nickName.value
		popShow.value = false
	}
	
	const save = async () => {
		uni.showLoading();
		const result = await api.updateInfo(store.user.UserID, unref(changeInfo));
		uni.hideLoading();
		await nextTick();
		if(result[1]) {
			uni.showToast({
				icon:'none',
				title:result[1]
			})
		} else {
			uni.showToast({
				icon:'success',
				title:'修改成功'
			})
			await uni.$u.sleep(800);
			uni.navigateBack();
		}
	}
	
	/* const childList = ref([]);
	const childListShow = ref(false);
	
	const getChildList = async () => {
		const result = await api.getChildList(store.user.UserID);
		if(result[0]) {
			childList.value = result[0]
		} else {
			childList.value = []
		}
	}
	
	const chooseChild = item => {
		uni.showModal({
			content:'确定要登录此账号吗？',
			success(res) {
				if(res.confirm) {
					childListShow.value = false;
					store.user = item;
					store.save();
					uni.navigateBack();
				}
			}
		})
	}
	 */
	const toAddress = () => {
		uni.navigateTo({
			url:`/pages/address/addressList`
		})
	}
	
	const toChangePwd = () => {
		uni.navigateTo({
			url:`/pages/changePwd/changePwd`
		})
	}
	
	const toAbout = () => {
		uni.navigateTo({
			url:`/pages/about/about`
		})
	}
	
	const toLogin=()=>{
		//store.logout();
		//await uni.$u.sleep(500);
		uni.navigateBack({
			success:()=>{
				uni.navigateTo({
					url:`/pages/login/login`
				})
			}
		})
	}
	
	const logout = () => {
		uni.showModal({
			content:'确定要退出登录吗？',
			async success(res) {
				if(res.confirm) {
					store.logout();
					await uni.$u.sleep(500);
					uni.navigateBack();
				}
			}
		})
	}
	
	uniapp.onLoad(() => {
		//getChildList();
	})
	
</script>

<style scoped>
	.hover-class{
		opacity: 0.5;
	}
</style>
